
<template>
  <div class="history">
    <div class="history-wrapper">
      <div class="history-list">
        <div class="history-item" v-for="item in chatList" :key="item.id" @click="toChat(item)">
          <img class="message-icon" src="@/assets/images/msg_un_select.png" alt="">
          <div class="history-item-info">
            <div class="history-item-name">
              {{ item.title }}
              --
              {{ item.type === 'text' ? '文本' : '图像' }}
            </div>
            <div class="history-item-model">{{ formatModel(item.model) }}</div>
          </div>
          <div class="history-item-handle">
            <div class="handle-icon edit" @click.stop="editChatItem(item)"/>
            <div class="handle-icon del" @click.stop="deleteChatItem(item)"/>
          </div>
        </div>
        <img v-if="chatList.length === 0" src="@/assets/images/empty.png" class="empty" />
      </div>
    </div>

    <!-- 删除确认弹窗 -->
    <el-dialog
      title="删除会话"
      :visible.sync="chatItemDeleteDialog"
      width="400px"
      :close-on-click-modal="false"
      center
    >
      <div class="dialog-content">
        确定要删除该会话吗？删除后将无法恢复。
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="chatItemDeleteDialog = false">取 消</el-button>
        <el-button type="primary" @click="confirmDeleteChatItem">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 修改名称弹窗 -->
    <el-dialog
      title="修改会话名称"
      :visible.sync="editTitleDialog"
      width="400px"
      :close-on-click-modal="false"
      center
    >
      <el-form ref="editForm" :model="editForm" :rules="editFormRules" label-width="0">
        <el-form-item prop="title">
          <el-input
            v-model="editForm.title"
            placeholder="请输入会话名称"
            maxlength="50"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editTitleDialog = false">取 消</el-button>
        <el-button type="primary" @click="$refs.editForm.validate(valid => valid && confirmEditTitle())">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {http} from "@/api";
import {mapState} from "vuex";

export default {
  name: "index",
  data() {
    return {
      chatList: [],
      chatItemDialog: false,
      chatItemDeleteDialog: false,
      chatItemEdit: {},
      editTitleDialog: false,
      editForm: {
        title: ''
      },
      editFormRules: {
        title: [
          { required: true, message: '请输入会话名称', trigger: 'blur' },
          { max: 50, message: '长度不能超过50个字符', trigger: 'blur' }
        ]
      },

      models:[]
    }
  },
  created() {
    http.model.userList({
      user_id: this.userInfo.id
    }).then(res => {
      this.models = res.data
    })
  },
  computed: {
    ...mapState('user', ['userInfo']),
    query() {
      return this.$route.query
    }
  },
  watch: {
    query: {
      handler() {
        this.loadChatList()
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    loadChatList() {
      if (this.userInfo && this.userInfo.id) {
        http.conversation.list({
          user_id: this.userInfo.id,
          type: this.query.type
        }).then(res => {
          this.chatList = res.data
        })
      }
    },
    toChat(item) {
      console.log(item)
      let find = this.models.find(model => model.model === item.model)
      if (find) {
        this.$router.push({
          path: find.path,
          query: {
            conversationId: item.id,
            model: item.model
          }
        })
      }
    },
    deleteChatItem(item) {
      this.chatItemDeleteDialog = true
      this.chatItemEdit = {
        ...item
      }
    },
    async confirmDeleteChatItem() {
      try {
        await http.conversation.delete(this.chatItemEdit.id);
        this.$message.success('删除成功');
        this.chatItemDeleteDialog = false;
        // 从列表中移除
        const index = this.chatList.findIndex(item => item.id === this.chatItemEdit.id);
        if (index > -1) {
          this.chatList.splice(index, 1);
        }
      } catch (error) {
        this.$message.error(error.message || '删除失败');
      }
    },
    editChatItem(item) {
      this.editTitleDialog = true;
      this.chatItemEdit = { ...item };
      this.editForm.title = item.title;
    },
    async confirmEditTitle() {
      try {
        const res = await http.conversation.update(this.chatItemEdit.id, {
          title: this.editForm.title
        });
        if (res.success) {
          this.$message.success('修改成功');
          // 更新列表中的标题
          const index = this.chatList.findIndex(item => item.id === this.chatItemEdit.id);
          if (index > -1) {
            this.chatList[index].title = this.editForm.title;
          }
          this.editTitleDialog = false;
        }
      } catch (error) {
        this.$message.error(error.message || '修改失败');
      }
    },
    formatModel(model) {
      const modelMap = {
        'gpt-3.5-turbo': 'GPT-3.5',
        'gpt-4': 'GPT-4',
        'deepseek': 'DeepSeek',
      };
      return modelMap[model] || model;
    },
  }
}
</script>

<style lang="scss">
.history {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: auto;
  height: 100%;
  .history-title {
    margin-bottom: 48px;
    font-size: 28px;
    color: rgba(0,0,0,0.85);
    text-align: center;
  }
  .history-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    .empty {
      position: absolute;
      top: 50%;
      left: 50%;
      height: 180px;
      transform: translate(-50%, -50%);
    }
  }
  .history-list {
    width: 100%;
    position: relative;
    min-height: 100%;
    .history-item {
      margin: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      background: #ffffff;
      border: 0.5px solid #d6d6d6;
      border-radius: 6px;
      padding: 12px 16px;
      height: 46px;
      justify-content: space-between;
      .message-icon {
        width: 24px;
        height: 24px;
        margin-right: 12px;
      }
      .history-item-info {
        flex: 1;
        min-width: 0;
        .history-item-name {
          font-size: 14px;
          color: #302e34;
          margin-bottom: 4px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .history-item-model {
          font-size: 12px;
          color: #999;
        }
      }
      .history-item-handle {
        display: flex;
        align-items: center;
        gap: 8px;
        .handle-icon {
          width: 16px;
          height: 16px;
          cursor: pointer;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          &.edit {
            background-image: url("~@/assets/images/edit.png");
          }
          &.del {
            background-image: url("~@/assets/images/del.png");
          }
        }
      }
      &:hover {
        background-color: #f5f5f5;
        .history-item-handle {
          opacity: 1;
          .edit {
            background-image: url("~@/assets/images/edit_active.png");
          }
          .del {
            background-image: url("~@/assets/images/del_active.png");
          }
        }
      }
    }
  }
}
.dialog-content {
  text-align: center;
  padding: 20px 0;
  color: #666;
}

.dialog-footer {
  text-align: center;
  padding-top: 10px;
}
</style>
